<template>
    <html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/jquery.min.js"></script>
		<script src="js/popper.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/comm.css"/>
		<link rel="stylesheet" type="text/css" href="css/footer.css"/>
	</head>
	<body>
		<div id="footer">
			<div class="container">
				<div>
					<div class="d-flex justify-content-between footer_color">
						<ul class=" list-unstyled">
							<li class="my-2">马蜂窝旅游网</li>
							<li class="mb-1">中国年轻一代用得更多的旅游网站</li>
							<li class="mb-1">上亿旅行者共同打造的<span class="color_org">"旅行神器"</span></li>
							<li class="mb-1"><span class="color_org">60,000</span> 多个全球旅游目的地</li>
							<li class="mb-1"><span class="color_org">600,000</span>个细分目的地新玩法</li>
							<li class="mb-1"><span class="color_org">760,000,000</span>次攻略下载</li>
							<li class="mb-1"><span class="color_org">38,000 </span>家旅游产品供应商</li>
						</ul>
						<ul class=" list-unstyled">
							<li class="my-2">关于我们</li>
							<li>
								<a href="#">关于马蜂窝</a>
								<a href="#">联系我们</a>
							</li>
							<li>
								<a href="#">隐私政策</a>
								<a href="#">商标声明</a>
							</li>
							<li>
								<a href="#">服务协议</a>
							</li>
							<li>
								<a href="#">商城平台服务协议</a>
							</li>
							<li>
								<a href="#">商城信息侵权通知指引</a>
							</li>
							<li>
								<a href="#">马蜂窝旅游网服务监督员</a>
							</li>
							<li>
								<a href="#">网站地图</a>
								<a href="#" class="color_org">加入马蜂窝</a>
							</li>
						</ul>
						<ul class=" list-unstyled">
							<li class="text-center my-2">旅行服务</li>
							<li>
								<a href="#">旅游攻略</a>
								<a href="#" class="li_left">酒店预订</a>
							</li>
							<li>
								<a href="#">旅游特价</a>
								<a href="#" class="li_left">国际租车</a>
							</li>
							<li>
								<a href="#">旅游问答</a>
								<a href="#" class="li_left">旅游保险</a>
							</li>
							<li>
								<a href="#">旅游指南</a>
								<a href="#" class="li_left">订火车票</a>
							</li>
							<li>
								<a href="#">旅游资讯</a>
								<a href="#" class="li_left">APP下载</a>
							</li>
							<li>
								<a href="#" class="color_org">旅行商家全球商家入驻</a>
							</li>
						</ul>
						<div id="qr_code">
							<div class="qr_code_1">
								<img src="../.././public/img/footer/qr_mfw4.gif" >
								<p>马蜂窝APP</p>
								<p>扫描立即下载</p>
							</div>
							<div class="qr_code_1">
								<img src="../.././public/img/footer/qr_mfw4.gif" >
								<p>马蜂窝APP</p>
								<p>扫描立即下载</p>
							</div>
							<div class="qr_code_1">
								<img src="../.././public/img/footer/qr_mfw4.gif" >
								<p>马蜂窝APP</p>
								<p>扫描立即下载</p>
							</div>
						</div>
					</div>
					<div class="text-center" id="sina_1">
						<p class="footer_color m-0" id="title_1">旅游之前先上马蜂窝</p>
						<div id="sina" class="pt-3">
							<a href="#">
								<i id="bg_sian1"></i>
							</a>
							<a href="#">
								<i id="bg_sian2"></i>
							</a>
							<a href="#">
								<i id="bg_sian3"></i>
							</a>
						</div>
					</div>
					<div id="a_style">
						<a href="" target="_blank">马可波罗</a>
						<a href="" target="_blank">Onlylady女人志</a>
						<a href="" target="_blank">艺龙旅游指南</a>
						<a href="" target="_blank">欣欣旅游网</a>
						<a href="" target="_blank">户外运动</a>
						<a href="" target="_blank">365音乐网</a>
						<a href="" target="_blank">爱问共享资料</a>
						<a href="" target="_blank">旅游网</a>
						<a href="" target="_blank">小说网</a>
						<a href="" target="_blank">学习啦</a>
						<a href="" target="_blank">游多多自助游</a>
						<a href="" target="_blank">问答</a>
						<a href="" target="_blank">火车时刻表</a>
						<a href="" target="_blank">驴妈妈旅游网</a>
						<a href="" target="_blank">好豆美食网</a>
						<a href="" target="_blank">二手车</a>
						<a href="" target="_blank">绿野户外</a>
						<a href="" target="_blank">途牛旅游网</a>
						<a href="" target="_blank">图吧</a>
						<a href="" target="_blank">SUV联合越野</a>
						<a href="" target="_blank">手机浏览器</a>
						<a href="" target="_blank">上海地图</a>
						<a href="" target="_blank">天气预报查询</a>
						<a href="" target="_blank">同程旅游</a>
						<a href="" target="_blank">火车票</a>
						<a href="" target="_blank">马蜂窝大学</a>
						<a href="" target="_blank">马尔代夫旅游</a>
						<a href="" target="_blank">YunOS</a>
						<a href="" target="_blank">携程旅游</a>
						<a href="" target="_blank">锦江旅游</a>
						<a href="" target="_blank">火车时刻表</a>
						<a href="" target="_blank">TripAdvisor</a>
						<a href="" target="_blank">天巡网</a>
						<a href="" target="_blank">短租房</a>
						<a href="" target="_blank">租租车</a>
						<a href="" target="_blank">五分旅游网</a>
						<a href="" target="_blank">酒店预订</a>
						<a href="" target="_blank">爱旅行网</a>
						<a href="" target="_blank">旅游</a>
						<a href="" target="_blank">旅游网</a>
						<a href="" target="_blank">wed114结婚网</a>
						<a href="" target="_blank">车讯网</a>
						<a href="" target="_blank">遨游旅游网</a>
						<a href="" target="_blank">手机</a>
						<a href="" target="_blank"> 更多友情链接>></a>
					</div>
					<div id="footer_bottom">
						<a href="#">
							<i id="bg_mfw"></i>
						</a>
						<p>© 2021 Mafengwo.cn
							<a href="#" target="_blank"> 京ICP备11015476号</a>
							<img src="../.././public/img/footer/police_record.png" style="margin:0 2px 4px 0 ;width: 12px;">
							<a href="#" target="_blank">京公网安备11010502013401号</a>
							<a href="#" target="_blank">京ICP证110318号</a>
						</p>
						<p>
							<a href="#" target="_blank">网络出版服务许可证</a>
							<a href="">营业执照</a>
							<a href="">广播电视节目制作经营许可证</a>
							<a href="">网络文化许可证</a>
							<a href="">网上有害信息举报专区</a>
							<a href="">帮助中心</a>
						</p>
						<p>
							<span>
								违法和不良信息举报电话: 010-83416877 举报邮箱: mfwjubao@mafengwo.com 全国旅游投诉电话：12301
							</span>
						</p>
						<p>
							<span class="ml-2">马蜂窝客服：国内</span>
							<span class="color_org">4006-345-678</span>
							<span class="ml-2">海外</span>
							<span class="color_org">+86-10-8341-6888</span>
						</p>
						
					</div>
					<div id="footer_bottom2" class="text-center">
						<a href="#" target="_blank" id="img_bottom1"></a>
						<a href="#" target="_blank" id="img_bottom2"></a>
						<a href="#" target="_blank" id="img_bottom3"></a>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
</template>
<style >
*{
	margin: 0;padding: 0;
}
#footer{
	background:#3c3c3c;
	width: 100%;
}

.container{
	
	font-size: 12px;
	display: block;
	line-height: 22px;
	padding-bottom: 20px;
}
.color_org{
	color:#ff9d00;
}
.color_org:hover{
	color: #ff9d00 !important;
}
.footer_color{
	color: #c2c2c2;
	margin:0px 8px 0px 8px;
}
#title_1{
	font-size: 16px;
}
a{
	color: #c2c2c2;
	text-decoration: none;
}
a:hover{
	text-decoration: none;
	color: #fff;
}
.li_left{
	margin-left: 37px;
}
#qr_code{
	width: 390px;
	height: 130px;
	padding-top: 30px;
}
.qr_code_1{
	float: right;
	width: 90px;
	margin-left: 30px;
	text-align: center;
}
.qr_code_1 p{
	margin-bottom: 0;
}
#sina>a{
	text-decoration: none;
	margin: 0 6px;
	
}
#sina>a>i{
	display: inline-block;
	width: 28px;height: 28px;
}
#bg_sian1{
	background: url(../.././public/img/footer/mfw-footer-sprite7.png) no-repeat 0 0;
}
#bg_sian2{
	background: url(../.././public/img/footer/mfw-footer-sprite7.png) no-repeat -30px 0;
}
#bg_sian3{
	background: url(../.././public/img/footer/mfw-footer-sprite7.png) no-repeat -60px 0;
}
#sina_1{
	padding-top: 30px;
	padding-bottom: 40px;
}
#a_style{
	width: 1105px;
	margin-right: 0;
	margin-top: -1px;
	border-top: 1px solid #575a5b;
	border-bottom: 1px solid #575a5b;
	padding: 17px 0 17px 8px;
}
#a_style a{
	display: inline-block;
	margin-right: 12px;
}
#bg_mfw{
	float: left;
	width: 136px;height: 39px;
	margin-top: 2px;
	margin-right: 20px;
	background: url(../.././public/img/footer/mfw-footer-sprite7.png) no-repeat 0 -30px;
}
#footer_bottom{
	padding: 12px 0 12px 7px;
}
#footer_bottom p{
	color: #c2c2c2;
	line-height: 22px;
	margin: 0;
}
#footer_bottom>p:nth-child(3)>a{
	margin-left: 10px;
}
#footer_bottom>p:nth-child(4)>span{
	margin-left: 10px;
}
#footer_bottom2>a{
	display: inline-block;
	width:90px ;height: 30px;
	margin-right: 10px;
}
#img_bottom1{
	background: url(../.././public/img/footer/mfw-footer-sprite7.png) no-repeat 0 -69px ;
}
#img_bottom2{
	background: url(../.././public/img/footer/mfw-footer-sprite7.png) no-repeat 0 -111px ;
}
#img_bottom3{
	background: url(../.././public/img/footer/mfw-footer-sprite7.png) no-repeat 0 -151px ;
}
</style>